import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import { SetOutline } from 'antd-mobile-icons'
import '../../style/Index/cart/Cartt.css'
import services from '../../api/interface'
class Cartt extends Component {
    state = {
        cartlist: [],
        currentindex: 0,
        secondlist: [],
        thirdlist: [],
        category:[]
    }

    async componentDidMount() {
        //左边数据列表
        var res = await services.pro.pro_categorylist()
        this.setState({
            cartlist: res.data.data
        })
        // console.log(res.data.data);
        var res1 = await services.pro.pro_categorybrandlist({ category: res.data.data[0] })
        this.setState({
            secondlist: res1.data.data,
        })
        console.log(res1.data.data[0]);
        var res2 = await services.pro.pro_categorybrandprolist({ category: res.data.data[0], brand:( res1.data.data[0].brand)})
        this.setState({
            thirdlist: res2.data.data
        })
        console.log(res1.data.data[0].brand);
    }
    async onClick(item, index) {

        var res1 = await services.pro.pro_categorybrandlist({ category: item })
        this.setState({
            currentindex: index,
            secondlist: res1.data.data,
            category:item
        })
        console.log( item);
        res1.data.data.map(
            async(item2,index)=>{
                var res2 = await services.pro.pro_categorybrandprolist({ category: item, brand:item2.brand})
                this.setState({
                    thirdlist: res2.data.data
                })
                console.log(res2.data.data);
                
            }
        )
        //三级列表
    }
    render() {
        return (
            <div className='cartt'>
                <div className='top'>
                    <div className='mine'>
                        <div className='navbarr'>
                            <span>&lt;</span>
                            <div className='cfenl'>分类</div>
                            <div className='miconv'>          
                            </div>
                        </div>
                    </div>
                    <div className='search'>
                        <input type="text" placeholder='搜索店铺内商品' />
                    </div>
                </div>
                <main>
                    <div className='cleft'>
                        {
                            this.state.cartlist.map((item, index) => {
                                return (
                                    <div className={'clist ' + (this.state.currentindex === index ? 'active' : '')} key={index} onClick={() => { this.onClick(item, index) }}>
                                        {item}
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='cright'>
                        {
                            this.state.secondlist.map((item2, index2) => {
                                return (
                                    <div className='ctopp' key={index2} >
                                        {item2.brand}
                                        {
                                            this.state.thirdlist.map((item3, index) => {
                                                return (
                                                    <div className='ctext' key={index} >
                                                        <img src={item3.img1} alt='' />
                                                        <div className='imright'>
                                                            {item3.proname}
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                )
                            })
                        }
                    </div>
                </main>

            </div>
        );
    }
}

export default Cartt;